<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom元素</title>
</head>
<body>
    <!--    id是唯一的-->
    <div id="outer">outer-div</div>

    <div class="test01">test01-div01</div>
    <div class="test01">test01-div02</div>

    <!--    不是每个标签都拥有name属性的-->
    <input type="checkbox" name="gender" value="0">男
    <input type="checkbox" name="gender" value="1">女

    <div>第三个div</div>

    <script>
        //1. 根据id来获取标签对象,返回的是单个对象 - id是唯一的
        let outer = document.getElementById("outer");
        console.log(outer);

        //2. 根据class属性的值来获取标签对象,因为class是允许重复的
        //返回的是一个数组
        let divs = document.getElementsByClassName("test01");
        console.log(divs[1]);

        //3. 根据name属性值获取 - 返回的是一个数组
        let inputs = document.getElementsByName("gender");
        console.log(inputs[1])

        //4. 根据标签的名称来获取
        let div_arr = document.getElementsByTagName("div");
        //获取数组的长度
        console.log(div_arr.length);
    </script>

</body>
</html>